<template>
  <div class="info-top">
    <div class="info-top-l">
      <div class="title">本周工单数</div>
      <div class="num">{{ dataInfo.weekOrders }}</div>
      <div class="bili">
        <div class="item">
          <span>周同比</span>
          <el-icon>
            <CaretTop
              v-if="Number(dataInfo.weekComparison) > 0"
              color="#36B368"
            />
            <CaretBottom v-else color="#ff4d4f" />
          </el-icon>
          <span>{{ dataInfo.weekComparison }}%</span>
        </div>
        <div class="item">
          <span>日环比</span>
          <el-icon>
            <CaretTop
              v-if="Number(dataInfo.dayComparison) > 0"
              color="#36B368"
            />
            <CaretBottom v-else color="#ff4d4f" />
          </el-icon>
          <span>{{ dataInfo.dayComparison }}%</span>
        </div>
      </div>
      <div class="daiban">
        待办工单数 <span>{{ dataInfo.total }}</span>
      </div>
    </div>
    <div class="info-top-r">
      <div class="card-container">
        <div class="item" v-for="(item, index) in infoData" :key="index">
          <div class="title">{{ item.complaint_category_level1 }}</div>
          <div class="content">
            <div class="content-text">
              <div class="content-text-t">占比</div>
              <div class="content-text-b">{{ item.percentage }}%</div>
            </div>
            <div class="content-chart">
              <PieProgress
                :value="item.percentage"
                :count="item.count"
                :total="100"
                color="#09f"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import PieProgress from "@/components/echarts/pie2.vue";
import { onMounted, onBeforeUnmount, ref } from "vue";

const props = defineProps({
  dataInfo: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  infoData: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const emit = defineEmits(["refresh"]);

let timer = null;

// 开始轮询
const startPolling = () => {
  // 清除可能存在的旧定时器
  if (timer) {
    clearInterval(timer);
  }

  // 设置新的定时器，每5秒调用一次
  timer = setInterval(() => {
    emit("refresh");
  }, 5000);
};

onMounted(() => {
  // 组件挂载时开始轮询
  startPolling();
});

onBeforeUnmount(() => {
  // 组件卸载前清除定时器
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<style lang="scss" scoped>
.info-top {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;

  &-l {
    width: 400px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);

    .title {
      color: #999;
      font-size: 16px;
      margin-bottom: 12px;
    }

    .num {
      font-size: 32px;
      font-weight: bold;
      color: #333;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .bili {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;

      .item {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #666;
        font-size: 14px;

        .el-icon {
          font-size: 14px;
        }
      }
    }

    .daiban {
      color: #666;
      font-size: 14px;

      span {
        color: #ff9900;
        font-weight: bold;
        margin-left: 4px;
      }
    }
  }

  &-r {
    flex: 1;

    .card-container {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
      display: flex;
      gap: 20px;
      height: 100%;

      .item {
        flex: 1;
        padding: 0;
        box-shadow: none;
        background: transparent;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        .title {
          color: #999;
          font-size: 16px;
          margin-bottom: 16px;
        }

        .content {
          display: flex;
          // justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;

          &-text {
            &-t {
              color: #666;
              font-size: 14px;
              margin-bottom: 4px;
            }

            &-b {
              color: #333;
              font-size: 24px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
